<template>
  <div style="height: 100%">
    <el-row style="height: 90%">
      <p style="height: 5%">驾校考试</p>
      <!-- 题目内容 -->
      <el-col :span="12" style="height: 90%">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-tag class="question_type">{{selectType === '2' ? '单选题':'判断题'}}</el-tag>
            <span class="question_num">&nbsp;&nbsp;{{curindex+1}}/{{allcount}}</span>
            <span class="question_title"
              >{{selectContent}}</span
            >
          </div>
          <el-row>
            <!-- 选项  style="display: block; marginTop: 10px;line-height:20px;white-space:normal;" -->
            <el-col :span="12">
              <div class="selectItem" :class="[curSelect === index ?(curSelect == selectRight-1? 'right':'error'):'' ]" v-for="(item,index) in selectOption" :key="index" @click="handleChange(index)">
                <span class="circle" :class="[curSelect === index ?(curSelect == selectRight-1? 'rightspan':'errorspan'):'' ]"></span>
                <span class="selectItem-content">{{item}}</span>
              </div>
            </el-col>
            <!-- 图片 -->
            <el-col :span="12" v-if="selectImg.length">
              <el-image :src="selectImg"></el-image>
            </el-col> 
          </el-row>
        </el-card>
      </el-col>
      <!-- 题目解析 -->
      <el-col :span="11" :offset="1" style="height: 90%">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-tag type="danger" class="answer_title">点拨</el-tag>
          </div>
          <div class="answer_content" style="line-height:30px" v-show="curSelect!==''">
            {{ selectAnswer }}
          </div>
        </el-card>
      </el-col>
    </el-row>
    <button @click="pre">上一题</button>
    <button @click="next">下一题</button>
    <input type="number" v-model="check_index">
    <button @click="handleCheck">跳转到</button>
    
  </div>
</template>

<script>
import { ReqJiaKaoQues,ReqQuestionNum } from "../../api/index";
export default {
  name: "jiakao",
  data() {
    return {
      check_index:'', //选择跳转
      allcount:0,// 当前题目总量
      curindex:0, //当前题目编号
      curSelect: "", // 当前的选择
      // ta是对应的正确答案，type对应的题目类型1为判断，2是选择
      select: {
        id: "256",
        question: "年满20周岁，可以初次申请下列哪种准驾车型？",
        a: "大型货车",
        b: "大型客车",
        c: "中型客车",
        d: "牵引车",
        ta: "1",
        imageurl: "https://wos.58cdn.com.cn/XyVuTsRqXyf/question/11121.jpg",
        bestanswer:
          "年满20周岁的，可以初次申请城市公交车、大型货车、无轨电车或者有轨电车准驾车型。",
        bestanswerid: "1356123085702479874",
        Type: "2",
        sinaimg: "",
        options: "A:大型货车, B:给两侧的非机动车和行人留有充足的通行空间给两侧的非机动车和行人留有充足的通行空间, C:中型客车, D:牵引车",
      },
    };
  },
  computed: {
    // 返回选项
    selectOption() {
      return this.select.options.replace(/ /g, "").split(",");
    },
    // 返回图片
    selectImg() {
      return this.select.imageurl;
    },
    // 返回解答
    selectAnswer() {
      return this.select.bestanswer;
    },
    // 返回题目类型
    selectType(){
      return this.select.Type
    },
    // 返回题目
    selectContent() {
      return this.select.question
    },
    // 返回正确选项
    selectRight() {
      return this.select.ta
    }
  },
  methods: {
    // 跳转到制定题目
    handleCheck: function(){
      const index = this.check_index
      // console.log(index)
      // console.log(index-1)
      if(index<=0 || index >= this.allcount){
        this.$message({
          type:'error',
          message:'请输入合法题号'
        })
        return
      }
      // 请求题目
      this.getQuestion(index-1)
      this.curindex = Number(index -1)
      this.curSelect =''
    },
    // 上一题
    pre: function(){
      if(this.curindex <= 0){
        this.$message.error("当前已经是第一题")
        return
      }
      let key = this.curindex
      this.curindex--
      this.getQuestion(--key)
      // 清除选项
      this.curSelect = ''
    },
    // 下一题
    next: function(){
      console.log('执行')
      if(this.curindex >= this.allcount-1){
        this.$message.error("当前已经是最后一题")
        return
      }
      let key = this.curindex
      this.curindex++
      this.getQuestion(++key)
      // 清除选项
      this.curSelect = ''
    },
    // 获取题目
    async getQuestion(index) {
      let result = await ReqJiaKaoQues(index);
      // console.log(result)
      if(result.code === 0){
        this.select = result.data
      }
    },
    // 选项发生变化
    handleChange(val){
      console.log(val)
      this.curSelect = val
      if(val == this.selectRight-1){
        this.$message({
                  message: "正确",
                  type: "success",
                });
      }else{
        this.$message({
                  message: "错误",
                  type: "error",
                });
      }
    }
  },
  created() {
    // 请求题目总量
    ReqQuestionNum().then(res => {
      if(res.code === 0){
        this.allcount = res.data
      }
    })
    // 请求题目
    this.getQuestion(this.curindex)
  },
    
};
</script>

<style >
li {
  list-style: none;
  margin-top: 10px;
  
}

.selectItem{
  font-size: 14px;
  color: #606266;
  line-height: 20px;
  cursor: pointer;
  margin-bottom: 10px;
}
.circle{
  position: relative;
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;
  border: 1px solid #606266;
  vertical-align: middle;
}
.circle::after{
  position: absolute;
  display: block;
  content: '';
  width: 4px;
  height: 4px;
  background: white;
  border-radius: 50%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
.selectItem-content{
  vertical-align: middle;
}
.error{
  
  color: red;
}
.right{
  
  color: #409EFF;
}
.rightspan{
  background: #409EFF;
}
.errorspan{
  background: red;
}
</style>
